import { h, render } from "preact";
import { useState } from "preact/hooks";

function Input(props: any) {
  const [value, setValue] = useState("");
  console.log("属性：", props);
  const inputVal = (e: InputEvent) => {
    if (e) {
      const v = (e.target as HTMLInputElement).value;
      console.log("输入内容：", v);
      setValue(v);
    }
  };
  return (
    <>
      <div>
        <input type="text" value={value} onInput={(e) => inputVal(e)} />
      </div>
    </>
  );
}

class MyWebComponent extends HTMLElement {
  constructor() {
    super();
    // 初始化 Shadow DOM 并渲染 Preact 组件
    const shadow = this.attachShadow({ mode: "open" });
    render(h(Input, {}), shadow);
  }
}

export const MyInput = customElements.define("my-input", MyWebComponent);
